<template>
  <div class="swipe-container" @click="handleContainerClick">
    <div
        class="swipe-item"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd">
      <div class="swipe-content" ref="swipeContent" :class="{ 'swipe-active': isSwiped }">
        <slot></slot>
      </div>
      <div class="swipe-actions" v-if="isSwiped">
        <el-button type="warning" class="action-button" @click.stop="editItem(item)">编辑</el-button>
        <el-button type="danger" class="action-button" @click.stop="openDialog()" slot="reference">删除</el-button>
      </div>
    </div>
    <el-dialog
        title="提示"
        v-model="dialogVisible"
        width="50%">
      <span>确认删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteItem(item)">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script setup>
import {ref, onMounted, onUnmounted, defineEmits, defineProps} from 'vue';
import {ElButton, ElDialog} from 'element-plus';

const emit = defineEmits(['editItem', 'deleteItem']);

const props = defineProps({
  item: {
    required: true
  }
});

let startX = 0;
const isSwiped = ref(false);
const swipeContent = ref(null);
const dialogVisible = ref(false);

const handleTouchStart = (event) => {
  startX = event.touches[0].clientX;
};

const handleTouchMove = (event) => {
  const currentX = event.touches[0].clientX;
  const diffX = startX - currentX;

  if (diffX > 50) {
    isSwiped.value = true;
  }
};

const handleTouchEnd = () => {
  if (!isSwiped.value) {
    isSwiped.value = false;
  }
};

const handleContainerClick = (event) => {
  if (isSwiped.value && !swipeContent.value.contains(event.target)) {
    isSwiped.value = false;
  }
};

const openDialog = () => {
  dialogVisible.value = true;
};

const handleConfirm = () => {
  console.log('Confirmed');
};

const editItem = (item) => {
  emit("editItem", item);
};

const deleteItem = (item) => {
  dialogVisible.value = false;
  emit("deleteItem", item);
};

onMounted(() => {
  document.addEventListener('click', handleContainerClick);
});

onUnmounted(() => {
  document.removeEventListener('click', handleContainerClick);
});
</script>

<style scoped>
.swipe-container {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  height: 100%;

}

.swipe-item {
  display: flex;
  align-items: center;
  position: relative;
}

.swipe-content {
  transition: transform 0.3s ease;
  flex: 1;
}

.swipe-active {
  transform: translateX(-150px); /* Adjust based on your actions width */
}

.swipe-actions {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  align-items: center;
}

.action-button {
  height: 80%;
  border-radius: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end; /* 将内容靠右对齐 */
  align-items: center; /* 确保按钮垂直居中 */
  margin-top: 20px; /* 调整按钮与内容之间的间距 */
}
</style>
